<template>
  <!-- 表格和分页 -->
  <div class="query-result">
    <!-- 表格 -->
    <h-table 
			ref="resultTable"
			class="result-table"
			:notSetWidth="true"
			:autoHeadWidth="true"
			:border="border"
			stripe
			canDrag
      :highlight-row="highlightRow"
			:columns="tableConfig.tColumns"
			:data="tableData"
			:showTitle="showTitle"
			@on-row-click="rowClick"
      @on-selection-change="selectionChange" ></h-table>
    <!-- 分页 -->
    <div v-if="hasPage" class="page-box">
      <h-page
				size="small"
				placement="top"
				:total="tableConfig.total"
				show-total
				:current="tableConfig.pageNo"
        :page-size="tableConfig.pageSize"
				show-sizer
				show-elevator
				@on-change="currentChange"
        @on-page-size-change="pageSizeChange"></h-page>
    </div>
  </div>
</template>

<script>
// table 文档 http://hui.hundsun.com/component/table.html#table-%E6%A6%82%E8%BF%B0
// 分页文档 http://hui.hundsun.com/component/page.html
export default {
  /**
   * tableConfig : {
   *      total: number, 搜索数据总计条数
   *      pageSize: number, 每页多少条数据
   *      pageNo: number, 第几页,
   *      tData: array, 列表数据
   *      tColumns: array 表格列的配置描述
   * }
   */
  props: {
    tableConfig: {
      type: [Object],
      default: () => {},
    },
    canDrag: {
      type: Boolean,
      default: true,
    },
    hasPage: {
      type: Boolean,
      default: true,
    },
    highlightRow: {
      type: Boolean,
      default: false,
    },
		showTitle: {
			type: Boolean,
			default: true
		},
		border: {
			type: Boolean,
			default: true
		}
  },
  data: () => {
    return {}
  },
  computed: {
    // 表格数据
    tableData() {
      return this.tableConfig.tData.slice(0)
    },
  },
  methods: {
    // 页码改变的回调，返回改变后的页码
    currentChange(pageNo) {
      this.$emit('currentChange', pageNo)
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    pageSizeChange(pageSize) {
      this.$emit('pageSizeChange', pageSize)
    },
    //只要选中项发生变化时就会触发，返回值为 selection，已选项。
    selectionChange(selection, index) {
      this.$emit('selectionChange', selection, index)
    },
    // 单击某一行时触发
    rowClick(arr) {
      this.$emit('rowClick', arr)
    },
		handleModifyData(index, obj) {
			this.$refs.resultTable.handleModifyData(index, obj)
		},
		handleDelData(index) {
			this.$refs.resultTable.handleDelData(index)
		}
  },
}
</script>

<style lang="scss" scoped>
/deep/ .h-table-tbody .h-table-row .table-opt .ope-btn {
  color: #298dff;
  cursor: pointer;
	padding: 0px 8px;
}

.page-box{
	margin-top: 16px;
	text-align: right;
}
</style>